<template>
  <div>
    <div class="list-top">
      <div class="list-top-right">
        <span v-if="isShop == 1">
          比赛门店
          <el-select v-model="searchData.shopName" size="small" class="search-input">
            <el-option
              v-for="(item,key) in shopList"
              :key="key"
              :label="item.shopName"
              :value="item.shopId"
            ></el-option>
          </el-select>
        </span> 报名状态
        <el-select v-model="searchData.enrolStatus" size="small" class="search-input">
          <el-option
            v-for="(item,key) in enrolStatusList"
            :key="key"
            :value="item.value"
            :label="item.label"
          ></el-option>
        </el-select>会员手机号
        <el-input v-model="searchData.phoneNumber" size="small" class="search-input"></el-input>
        <!-- 宝宝年龄   暂时不要了
        <el-select v-model="searchData.babyAge" size="small" class="search-input">
          <el-option v-for="(item,key) in ageList" :key="key" :value="item.key" :label="item.value"></el-option>
        </el-select>-->
        <el-button type="primary" size="small" @click="search">查询</el-button>
      </div>
    </div>
    <el-table :data="tableData" stripe style="width: 98%">
      <el-table-column prop="activityCode" label="序号" width="50">
        <template slot-scope="scope">{{scope.$index+ pageSize*(currentPage-1) +1}}</template>
      </el-table-column>
      <el-table-column prop="memberCompanyId" label="报名账户ID" width="110"></el-table-column>
      <el-table-column prop="phone" label="会员手机号" width="115"></el-table-column>
      <el-table-column prop="memberName" label="报名用户姓名" width="110" algin="center"></el-table-column>
      <el-table-column prop="babyName" label="宝宝姓名" width="80" algin="center"></el-table-column>
      <el-table-column prop="babyGender" label="宝宝性别" width="80" :formatter="babyGender"></el-table-column>
      <el-table-column prop="babyBirth" label="宝宝生日" width="100" :formatter="forbabyBirth"></el-table-column>
      <el-table-column prop="babyAge" label="宝宝年龄时间段" width="120" algin="center"></el-table-column>
      <el-table-column prop="createTime" label="报名时间" width="100" :formatter="forcreateTime"></el-table-column>
      <el-table-column prop="shopName" label="报名门店" width="120"></el-table-column>
      <el-table-column prop="status" label="报名状态" width="80" :formatter="enrolStatus"></el-table-column>
      <el-table-column prop="operate" label="操作">
        <template slot-scope="scope">
          <div v-if="scope.row.status == 0">
            <el-button v-if="scope" type="text" size="small" @click="onCheck(scope.row,0)">审核通过</el-button>
            <el-button type="text" size="small" @click="onCheck(scope.row,1)">审核拒绝</el-button>
            <el-button type="text" size="small" @click="onCheck(scope.row,2)">重新报名</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="pageblock">
      <el-button size="small" type="primary" @click="toPage">确定</el-button>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5,10,15,20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalNum"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import util from "@/util";
import s from "@/util/state";
import {
  listMatchShop,
  listInformation,
  applyAudit,
  deleteInformation
} from "@/api";
import { mapState } from "vuex";
export default {
  computed: mapState(["sub", "power", "merchantId", "isShop"]),
  data() {
    return {
      searchData: {
        shopName: "",
        babyAge: "0",
        phoneNumber: "",
        enrolStatus: ""
      },
      shopList: [
        {
          shopName: "全部",
          shopId: ""
        }
      ],
      enrolStatusList: [
        {
          label: "全部",
          value: ""
        },
        {
          label: "审核中",
          value: 0
        },
        {
          label: "报名成功",
          value: 1
        },
        {
          label: "报名拒绝",
          value: 2
        },
        {
          label: "重新报名",
          value: 3
        }
      ],
      ageList: [
        {
          value: "0~6个月",
          key: 1
        }
      ],
      pageSize: 10,
      currentPage: 1,
      totalNum: 0,
      tableData: []
    };
  },
  mounted() {
    this.getEnrolList();
    this.getShopList();
  },
  methods: {
    enrolStatus: s.enrolStatus,
    babyGender: s.babyGender,
    forbabyBirth(row) {
      let year = util.foryear(parseInt(row.babyBirth));
      return year;
    },
    forcreateTime(row) {
      let year = util.foryear(parseInt(row.createTime))
      let time = util.fortime(parseInt(row.createTime));
      return year + " " + time;;
    },
    getShopList() {
      this.shopList = [
        {
          shopName: "全部",
          shopId: ""
        }
      ];
      listMatchShop().then(res => {
        this.shopList = this.shopList.concat(res.data);
      });
    },
    search() {
      this.getEnrolList();
    },
    getEnrolList() {
      let data = {
        // shopId: this.searchData.shopName,
        phone: this.searchData.phoneNumber,
        status: this.searchData.enrolStatus,
        pageNum: this.currentPage,
        pageSize: this.pageSize
      };
      if (this.isShop == 1) {
        data.shopId = this.searchData.shopName;
      } else {
        data.shopId = this.merchantId;
      }
      listInformation(data).then(res => {
        this.tableData = res.data.marketYltSignUpList;
        this.totalNum = res.data.totalPage;
      });
    },
    toPage(val) {
      this.currentPage = val;
      this.getEnrolList();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getEnrolList();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getEnrolList();
    },
    onCheck(row, type) {
      let tipMessage = "",
        buttonMessage = "确认",
        status;
      switch (type) {
        case 0:
          tipMessage = "确定是否通过该用户参赛信息？";
          status = 1;
          break;
        case 1:
          tipMessage = "确定是否拒绝该用户参赛？";
          buttonMessage = "确定拒绝";
          status = 2;
          break;
        default:
          tipMessage = "确定是否使用户重新报名？";
          buttonMessage = "确认";
          break;
      }
      this.$confirm(tipMessage, "提示", {
        confirmButtonText: buttonMessage,
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          if (type === 2) {
            let data = { id: row.id };
            deleteInformation(data).then(res => {
              if (res.code == 200) {
                this.getEnrolList();
                this.$message({
                  type: "success",
                  message: "操作成功"
                });
              }
            });
          } else {
            let data = {
              id: row.id,
              status: status
            };
            applyAudit(data).then(res => {
              if (res.code == 200) {
                this.getEnrolList();
                this.$message({
                  type: "success",
                  message: "操作成功"
                });
              }
            });
          }

          this.getEnrolList();
        })
        .catch(() => {});
    }
  }
};
</script>
<style  lang="less" scoped>
.list-top {
  padding: 20px 10px;
  display: flex;
  justify-content: space-between;
  .list-top-right {
    width: 80%;
  }
}
.search-input {
  width: 12%;
  margin: 0 5px 0;
}
.pageblock {
  box-sizing: border-box;
  padding-right: 10px;
  .el-button {
    float: right;
  }
}
</style>
